<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/commons/taglibs.jsp" %>

<title><fmt:message key="AcctUser.title"/></title>
<script src="${ctx}/assets/js/bootstrap-paginator.min.js"></script>

<script>
$(".sjzd").addClass("active").parent("ul").parent("li").addClass("active open");
jQuery(function($) {
	addCustomPaginator('#pagination','#queryForm','#sortColumns','#page', "${query.page}","${page.totalPages}","allOrder");
	changeSort("#queryForm","#dynamic-table",'#sortColumns','#page');
	initialTableSort("#dynamic-table",'#sortColumns');

	deleteOne(".deleteButton","${ctx}/sysDict/json/delete");
	addPopup("#addButton",'${ctx}/sysDict/popup/create?parent.id=${query.parentId}','<fmt:message key="navigation.title.create"/> <fmt:message key="SysDict.title"/>')
	editPopup(".editButton","${ctx}/sysDict/popup/create",'<fmt:message key="navigation.title.edit"/> <fmt:message key="SysDict.title"/>')
	checkAllRecord("#checkAll",".checkitems")
	deleteAll("#deleteAllButton","${ctx}/sysDict/json/deleteAll","items","Please select at least one item to delete");
	$(".dictName").click(function(){
		$("#parentId").val($(this).attr("id").split("-")[1]);
		$("#queryForm").submit()
	})
	
	$(".levelButton").click(function(){
		var id = $(this).attr("data-id");
		var level = $(this).attr('data-level');
		$("#parentId").val(id);
		$("#dictLevel").val(level);
		$("#queryForm").submit()
	})

})

</script>
<custom:message/>
<fmt:message key="navigation.button.query" var="queryButtonName"/>
<fmt:message key="SysDict.dictName.title" var="dictNameTitle"></fmt:message>
<fmt:message key="SysDict.dictCode.title" var="dictCodeTitle"></fmt:message>
<fmt:message key="SysDict.dictDesc.title" var="dictDescTitle"></fmt:message>
<fmt:message key="SysDict.dictLevel.title" var="dictLevelTitle"></fmt:message>
<fmt:message key="navigation.searchResult" var="searchResultTitle"/>
<form:form action="${ctx }/sysDict/list" modelAttribute="query" id="queryForm" name="queryForm" method="post" style="display: inline;" class="form-horizontal">
<form:hidden path="parentId"/>
<form:hidden path="dictLevel"/>

<div class="row">
	<div class="widget-box">
		<div class="widget-header widget-header-small">
			<h5 class="lighter">Search Form</h5>
		</div>
		<div class="widget-body">
		<div class="widget-main">
			

			<div class="form-group"> 				

				<label class="control-label no-padding-right col-md-2 col-xs-4">${dictCodeTitle }</label>
				
				<div class="col-md-3 col-xs-8"> 
					<form:input path="dictCode" id="dictCode" cssClass="form-control" maxlength="45" class=""/> 
				</div>


				<label class="control-label no-padding-right col-md-2 col-xs-4">${dictNameTitle } </label>
				
				<div class="col-md-3 col-xs-8"> 
					<form:input path="dictName" id="dictName" cssClass="form-control" maxlength="45" class=""/> 
				</div>

			</div>
			
			<div class="form-group">
				<div class="col-md-offset-2 col-md-9">
					<button class="btn btn-mini btn-primary radius-4" onclick="getReferenceForm(this).action='${ctx}/acctUser/list'">
						<i class="ace-icon fa fa-search nav-search-icon"></i>
						${queryButtonName}
					</button>
				</div>
			</div>

		</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">
				${searchResultTitle }
				<c:if test="${query.parentId != null }">
				<a class="btn btn-mini btn-purple levelButton" data-level="1" data-id="">
				<fmt:message key="SysDict.level.top"></fmt:message>
				<i class="fa fa-arrow-right"></i>
				</a>
				</c:if>
				<c:forEach items="${parentList }" var="item">
					<a data-level="${item.dictLevel }" class="btn btn-mini btn-purple levelButton" data-id="${item.id }">
					<c:out value="${item.dictName }"></c:out> 
					<i class="fa fa-arrow-right"></i>
					</a>
				</c:forEach>
				</div>
				<div>
					<table id="dynamic-table" class="table table-responsive table-striped table-bordered table-hover dataTable">
						<thead>
							<tr>
								<th style="width:1px;"> </th>
								<th style="width:1px;"><input type="checkbox" id="checkAll"></th>
								
								<th class="sorting" data-name="dictName">${dictNameTitle }</th>
								<th class="sorting" data-name="dictCode">${dictCodeTitle }</th>
								<th class="sorting" data-name="dictDesc">${dictDescTitle }</th>
								<th class="sorting" data-name="dictLevel">${dictLevelTitle }</th>
								<th><fmt:message key="navigation.label.operation"/></th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${page.content}" var="item" varStatus="status">
								<tr>
									<td data-label="序号">${page.number * page.size + status.index + 1}</td>
									<td><input type="checkbox" name="items" value="${item.id}" class="checkitems"></td>
									
									<td data-label="${dictNameTitle }"><a class="dictName" id="dict-${item.id }"><c:out value='${item.dictName}'/></a>&nbsp;</td>
									<td data-label="${dictCodeTitle }"><c:out value='${item.dictCode}'/>&nbsp;</td>
									<td data-label="${dictDescTitle }"><c:out value='${item.dictDesc}'/>&nbsp;</td>
									<td data-label="${dictLevelTitle }"><c:out value='${item.dictLevel}'/>&nbsp;</td>
									<td data-label="<fmt:message key="navigation.label.operation"/>">
										<div class="hidden-sm hidden-xs action-buttons">											
											<a class="green editButton" id="editButton-${item.id }">
												<i class="ace-icon fa fa-pencil bigger-130"></i>
											</a>
											<a class="red deleteButton" id="deleteButton-${item.id }">
												<i class="ace-icon fa fa-trash-o bigger-130"></i>
											</a>
										</div>						
									</td>
								  </tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<div class="ui-pager-control"  style="background-color:#EFF3F8">
					<table class="ui-pg-table ui-common-table ui-pager-table ">
						<tr>
							<td class="ui-pg-button ui-corner-all">
								<div class="ui-pg-div">
									<a id="addButton">
										<span class="ui-icon ace-icon fa fa-plus-circle purple"></span>
									</a>
								</div>
							</td>
							<td class="ui-pg-button ui-corner-all">
								<div class="ui-pg-div">
									<a id="deleteAllButton">
										<span class="ui-icon ace-icon fa fa-trash-o red"></span>
									</a>
								</div>
							</td>
							
						</tr>
					</table>
					
				</div>
			</div>
			<div class="">
				<input type="hidden" name="sortColumns" id="sortColumns" value="${query.sortColumns}" />
				<input type="hidden" name="page" id="page" value="${query.page}" />
				<c:if test="${page.totalPages > 1}">
					<div class=" pull-right">
						<ul id="pagination"></ul>
					</div>
				</c:if>
			</div>
		</div>
		</div>
	
</div>

<script>


</script>

</form:form>